<template>
  <view class="login">
    <image class="login-pic" :src="imgBaseURL + 'login-bg.png'" />
    <!-- <button class="login-btn" v-if="!isSelected" @click="showToast('请阅读并同意协议')">手机号一键登录</button> -->
    <!-- <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号一键登录</button> -->
    <button class="login-btn" @click="loginClick()">抖音一键登录</button>
    <button class="other-login-btn" @click="otherLogin()">其他手机号登录</button>
    <view class="agreement-box">
      <image class="circle-icon" v-if="!isAgreest" src="@/static/images/circle.png" @click="isAgreest = true" />
      <image class="circle-icon" v-else src="@/static/images/circle-s.png" @click="isAgreest = false" />
      <view class="agreement-txt-box">
        <text>我已阅读并同意</text>
        <navigator style="color: #888" url="/pages/login/agreement?type=服务协议" hover-class="none">《服务协议》</navigator>和
        <navigator style="color: #888" url="/pages/login/agreement?type=隐私政策">《隐私政策》</navigator>和
        <navigator style="color: #888" url="/pages/login/agreement?type=用户协议">《用户协议》</navigator>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { imgBaseURL } from '@/utils/tools'
  import { ref } from 'vue'

  const isAgreest = ref(false) // 是否同意用户协议

  const loginClick = () => {
    uni.login({
      success: (result) => {
        console.log(result)
      },
      fail: (error) => {
        console.log(error)
      }
    })

    tt.login({})
  }

  /**其它登录方式 */
  const otherLogin = () => {
    uni.navigateTo({ url: '/pages/login/loginCode' })
  }
</script>

<style lang="scss" scoped>
  .login {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background: #ffffff;

    .login-pic {
      margin-top: 110rpx;
      width: 460rpx;
      height: 570rpx;
    }

    .login-btn {
      width: 640rpx;
      height: 80rpx;
      font-size: 36rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
      background-color: #df3030;
      border-radius: 40rpx;
    }

    .other-login-btn {
      width: 640rpx;
      height: 80rpx;
      margin-top: 30rpx;
      font-size: 36rpx;
      font-weight: 400;
      color: #888888;
      line-height: 80rpx;
      text-align: center;
      background-color: #f1f1f1;
      border-radius: 40rpx;
    }

    .agreement-box {
      width: 580rpx;
      display: flex;
      align-items: center;
      margin-top: 43rpx;

      .circle-icon {
        flex-shrink: 0;
        width: 30rpx;
        height: 30rpx;
        margin-right: 26rpx;
      }

      .agreement-txt-box {
        display: flex;
        align-items: center;

        flex-wrap: wrap;
        height: 66rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #cccccc;
        line-height: 33rpx;
      }
    }
  }
</style>
